<template>
    <div class="clearfix da-details">
        <section class="content-header">
            大用户档案管理&nbsp;/&nbsp;档案管理&nbsp;/&nbsp;档案详情
        </section>

        <div class="col-md-12" style="margin-top:50px;">
            <form class="form-horizontal">
                <div class="clearfix">
                    <div class="col-md-4">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">用户编号：</label>
                                <div class="col-sm-8">
                                    <p>{{list.userNum}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">用户名称：</label>
                                <div class="col-sm-8">
                                    <p>{{list.userName}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">用户类型：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.userType, this.typesList, 'value', 'name')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">行业：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.businessType, this.industryList, 'value', 'name')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">企业投产年份：</label>
                                <div class="col-sm-8">
                                    <p>{{list.productionTime}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">节水型企业：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.conserLevel, this.enterpriseList, 'value', 'name')}}</p>
                                </div>
                            </div>
                            <!-- <pianqu v-model="form.areaId" />
                            <yingyesuo v-model="form.deptId" :areaId="form.areaId" />
                            <yongshui-type v-model="form.waterType" /> -->
                            <div class="form-group">
                                <label class="col-sm-4 control-label">营业所：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.deptId, this.deptList, 'areaId', 'areaName')}}</p>
                                    <!-- <p>{{list.deptId}}</p> -->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">片区：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.areaId, this.areaList, 'areaId', 'areaName')}}</p>
                                    <!-- <p>{{list.areaId}}</p> -->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">用水类型：</label>
                                <div class="col-sm-8">
                                    <p>{{getItemName(list.waterType, this.watertypeList, 'value', 'name')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-4 control-label">位置：</label>
                                <div class="col-md-8">
                                    <i class="fa fa-map" aria-hidden="true" style="margin-top:10px;cursor: pointer;"></i>
                                </div>
                            </div>
                            <div class="form-group xingzhi">
                                <label class="col-md-4 control-label">性质：</label>
                                <div class="col-md-1">
                                </div>
                                <div class="col-md-2">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="xingzhi" value="长期" disabled v-model="list.userPro">
                                            长期
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="xingzhi" value="阶段性" disabled v-model="list.userPro">
                                            阶段性
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="xingzhi" value="临时" disabled v-model="list.userPro">
                                            临时
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">

                    </div>
                    <div class="col-md-6">
                        <div class="box-body">
                            <!-- <div class="form-group">
                                <label class="col-md-2 control-label">监测点个数：</label>
                                <div class="col-md-2">
                                    <select class="form-control select2" style="width: 100%;" v-model="list.userMonitornum">
                                        <option value="1" selected>1</option>
                                        <option value="3" selected>3</option>
                                        <option value="2" selected>2</option>
                                    </select>
                                </div>
                            </div> -->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">监测点个数：</label>
                                <div class="col-sm-2">
                                    <p>{{list.userMonitornum}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">监测点描述：</label>
                                <div class="col-sm-8">
                                    <textarea class="form-control" rows="6" placeholder="请输入描述" disabled maxlength="80" v-model="list.monitorDes"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">仪表管理：</label>
                                <div class="col-sm-8 tablebox">
                                    <table id="example" class="table table-bordered table-hover">
                                        <thead style="font-weight:700">
                                            <tr>
                                                <td>名称</td>
                                                <td>型号</td>
                                                <td>使用时间</td>
                                                <td>年限</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="item in list.infoList" :key="item.value">
                                                <td>{{item.insName}}</td>
                                                <td>{{item.insVer}}</td>
                                                <td>{{item.useTime}}</td>
                                                <td>{{item.age}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top:100px">
                    <div class="col-md-1 col-md-offset-4">
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-block btn-default" data-toggle="modal" data-target="#myModal">返回</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">返回</h4>
                    </div>
                    <div class="modal-body">
                        <p>确定返回档案管理页面吗？</p>
                    </div>
                    <div class="modal-footer">
                        <!-- <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button> -->
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="$router.push({path:'da-index'})">确定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
    </div>
</template>

<script>
import utils from "@/utils/index"
import { getItemName } from "@/filters/index.js";

import pianqu from "@/components/common/area.vue";
import hangye from "@/components/common/hangye.vue";
import yingyesuo from "@/components/common/yingyesuo.vue";
import yonghuType from "@/components/common/yonghuType.vue";
import yongshuiType from "@/components/common/yongshuiType.vue";


export default {
    data() {
        return {
            enterpriseList: [],
            list: {},
            typesList: [],
            industryList: [],
            areaList: [],
            deptList:[],
            watertypeList:[]
        }
    },
    mounted() {
        this.getList(() => {
            this.getEnterpriseList()
            this.getTypes()
            this.getIndustry()
            this.getDept()
            this.getArea()
            this.getWatertype()
        })

    },

    methods: {
        getItemName,
        //获取节水型企业列表
        getEnterpriseList() {
            this.$api.biguser.enterprise().then(res => {
                if (res.success) {
                    // console.log(res.data)
                    this.enterpriseList = res.data
                }
            });
        },
        //获取详情列表
        getList(callback) {
            this.$api.biguser.userdetail({
                userNum: this.$route.query.userNum
            }).then(res => {
                if (res.success) {
                    this.list = res.data
                    callback()
                }
            });
        },
        //用户类型
        getTypes() {
            this.$api.biguser.types().then(res => {
                if (res.success) {
                    // console.log(res.data)
                    this.typesList = res.data
                }
            });
        },
        //行业
        getIndustry() {
            this.$api.biguser.industry().then(res => {
                if (res.success) {
                    // console.log(res.data)
                    this.industryList = res.data
                }
            });
        },
        //片区
        getArea() {
            this.$api.biguser.selArea({
                areaId: this.list.deptId
            }).then(res => {
                if (res.success) {
                    this.areaList = res.data
                }
            });
        },
        //营业所
        getDept() {
            this.$api.biguser.selDept().then(res => {
                if (res.success) {
                    // console.log(res.data)
                    this.deptList = res.data
                }
            });
        },
        //用水类型
        getWatertype() {
            this.$api.biguser.watertype().then(res => {
                if (res.success) {
                    // console.log(res.data)
                    this.watertypeList=res.data
                }
            });
        },
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
